<template>
    <!-- 返回键 -->
    <div class="back">
        <van-nav-bar title="消费记录" left-text="返回" left-arrow @click-left="back" />
    </div>

    <div class="times">
        <van-cell is-link arrow-direction="down" @click="show=!show" v-if="this.year=='' ">请选择时间</van-cell>
        <van-cell is-link arrow-direction="down" @click="show=!show" v-if="this.year!=''">{{this.year}}年{{this.month}}
        </van-cell>
        <!-- 卡片 -->
        <div class="record" v-for='item in list'>
            <van-swipe-cell>
                <van-cell-group>
                    <van-cell title="发布帖子" :label="item.createtime" v-if="item.state==1">
                        <template #value>
                            <span class="point">-{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>帖子花费</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>


                    <van-cell title="帖子采纳" :label="item.createtime" v-if="item.state==2">
                        <template #value>
                            <span class="point">-{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>帖子花费</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>
                    <!-- 充值 -->
                    <van-cell title="充值" :label="item.createtime" v-if="item.state==3">
                        <template #value>
                            <span class="point">-{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>充值</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>
                    <!-- 签到 -->
                    <van-cell title="签到" :label="item.createtime" v-if="item.state==4">
                        <template #value>
                            <span class="point" style="color: orangered;">+{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>帖子花费</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>
                    <!-- 下单 -->
                    <van-cell title="下单" :label="item.createtime" v-if="item.state==5">
                        <template #value>
                            <span class="point">-{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>帖子花费</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>
                    <!-- 预约 -->
                    <van-cell title="下单" :label="item.createtime" v-if="item.state==6">
                        <template #value>
                            <span class="point">-{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>商品下单</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>

                    <!-- 退款 -->
                    <van-cell title="下单" :label="item.createtime" v-if="item.state==-1">
                        <template #value>
                            <span class="point" style="color: orangered;">+{{item.point}}元</span>
                        </template>
                        <!-- 时间 -->
                        <template #label>
                            <span>商家退款</span><br>
                            <span style="width:1rem;">{{item.createtime}}</span>
                        </template>
                    </van-cell>

                </van-cell-group>
                <!-- 删除滑块 -->
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="remove(item.id)" />
                </template>
            </van-swipe-cell>
        </div>

        <!-- 时间插件 -->
        <van-popup v-model:show="show" position="bottom">
            <van-datetime-picker title="选择年月" v-model="currentDate" :min-date="minDate" :max-date="maxDate"
                type="year-month" :formatter="formatter" @confirm="confirm" @cancel="cancel" />
        </van-popup>
    </div>

</template>
<script>
    export default {
        name: 'BaseRecord',
        data() {
            return {
                recordList: [],
                list: [],
                LoginUser: this.$cookies.get('LoginUser'),

                minDate: new Date(2019, 12, 31),
                maxDate: new Date(2035, 12, 31),
                year: '',
                month: '',
                createtime: '',
                newTime: '',
              
            
                show: false,

            }
        },

        created() {
            // 进来就要渲染
            this.record()
        },
        methods: {
            // 返回上一级
            back() {
                this.$router.go(-1)
            },
            // 调接口拿数据
            async record() {
                var data = {
                    userid: this.LoginUser.id,
                }
                var result = await this.$api.record(data)

                if (result.code == '1') {
                    this.list = result.data
                } else {
                    // 提示信息
                    this.$notify({
                        message: result.msg,
                        duration: 1000,
                    })
                }
            },
            // 获取时间
            async confirm() {
                var year = this.currentDate.getFullYear() //年
                var month = Number(this.currentDate.getMonth() + 1) //月
                var oldTime = (new Date(`${year}/${month}/01 00:00:00`)).getTime() / 1000
                var newTime = (new Date(`${year}/${month+1}/01 00:23:59`)).getTime() / 1000

                // console.log(oldTime,newTime);
                // return false;
                var data = {
                    userid: this.LoginUser.id,
                    createtime: oldTime,
                    newTime: newTime
                }
                var result = await this.$api.record(data)
                this.year = year
                this.month = month
                this.list = result.data
                this.show = false

            },
            cancel() {
                this.show = false
            },
            // 单条删除
            async remove(recordid) {
                this.$dialog.confirm({
                    'title': '删除消费记录',
                    'message': '是否确认删除',
                }).then(async () => {
                    // console.log(recordid);//传下来id
                    var data = {
                        recordid
                    }
                    var result = await this.$api.delRecord(data)

                    if (result.code == 0) {
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })
                        return false
                    }
                    this.record();
                }).catch(() => {})
            }
        },

    }
</script>
<style>
    .point {
        font-size: .9rem;
        color: #000;
    }

    .top {
        display: flex;
    }

    .times {
        z-index: 100;
    }
</style>